<template>
  <div>
    <div class="tit">
      <!-- 零元抽大奖 第 期 -->
      <el-button size="small" @click="$emit('out')">
        返回
      </el-button>
      {{ title }} {{ titleTime }}
    </div>
    <Header>
      <div class="hm">
        <div>
          <p class="hmtit">参与人数：</p>
          {{ nums }}人
        </div>
        <div>
          <p class="hmtit">系统计算中奖号码：</p>
          {{ prizeCodes }}
        </div>
        <div>
          <p class="hmtit">中奖人数：</p>
          {{ winner }}人
        </div>
        <div>
          <p class="hmtit">奖品：</p>
          {{ prize }}
        </div>
      </div>
    </Header>
    <Header>
      <span class="head-label">
        中奖状态：
      </span>
      <el-select
        v-model="select"
        size="mini"
        placeholder="请选择"
        class="head-input"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <span class="head-label">
        手机号：
      </span>
      <el-input
        v-model="phone"
        class="head-input"
        size="mini"
        placeholder="请输入"
      ></el-input>
      <span class="head-label">姓名：</span>
      <el-input
        v-model="name"
        class="head-input"
        size="mini"
        placeholder="请输入姓名"
      ></el-input>
      &nbsp;&nbsp;
      <el-button size="mini" type="primary" @click="getList">搜索</el-button>
      <el-button size="mini" @click="reset">重置</el-button>
    </Header>
    <Main :data="listData" :footer-lock="totals > 10">
      <el-table-column
        label="参与人ID"
        align="center"
        property="member.nick_name"
      ></el-table-column>
      <el-table-column
        label="姓名"
        align="center"
        property="truename"
      ></el-table-column>
      <el-table-column
        label="手机号"
        align="center"
        property="phone"
      ></el-table-column>
      <el-table-column label="参与时间" align="center" property="create_time">
        <template slot-scope="scope">
          {{ scope.row.create_time }}:{{ scope.row.millisecond }}
        </template>
      </el-table-column>
      <el-table-column
        label="抽奖号码"
        align="center"
        property="activity_codes"
      >
        <template slot-scope="scope">
          <span
            v-for="(item, index) in scope.row.activity_codes.split('、')"
            :key="index"
            :style="scope.row.lightCode === item ? 'color:#67C23A;' : ''"
          >
            {{ item }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="中奖状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.win == 0" style="color:#E6A23C;">未中奖</span>
          <span v-if="scope.row.win == 1" style="color:#67C23A;">中奖</span>
          <span v-if="scope.row.win == 2" style="color:#F56C6C;">已兑奖</span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="250"
        class-name="tableoperation"
      >
        <template slot-scope="scope">
          <el-button v-if="scope.row.win != 0" size="mini" type="text">
            奖品订单
          </el-button>
          <el-button v-else size="mini" type="text" disabled>
            暂无订单
          </el-button>
        </template>
      </el-table-column>
    </Main>

    <Footer :total="totals">
      <el-pagination
        :page-size="10"
        layout="prev, pager, next"
        :total="totals"
        @current-change="changes"
      >
      </el-pagination>
    </Footer>
  </div>
</template>
<script>
import { ACTIVITYDETAIL } from "../service";

export default {
  props: {
    hotId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      listData: [],
      totals: 0,
      pages: 1,
      prizeCodes: "",
      winner: 0,
      prize: "",
      title: "",
      titleTime: "",
      nums: 0,
      phone: "",
      name: "",
      select: 0,
      options: [
        {
          value: 0,
          label: "全部"
        },
        {
          value: 1,
          label: "未中奖"
        },
        {
          value: 2,
          label: "已中奖"
        },
        {
          value: 3,
          label: "已兑奖"
        }
      ]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async del() {
      await this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // WIFI_ADD({ wifi_id: id, type: 'del' })
          //   .then(res => {
          //     let { code, msg } = res
          //     if (code === 200) {
          //       this.getList()
          //     }
          //     this.$message({
          //       message: msg,
          //       type: code === 200 ? 'success' : 'error'
          //     })
          //   })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除!"
          });
        });
    },
    reset() {
      this.select = "";
      this.phone = "";
      this.name = "";
      this.getList();
    },
    async getList() {
      await ACTIVITYDETAIL({
        hot_id: this.hotId,
        page: this.pages,
        pageshow: 10,
        status: this.select,
        phone: this.phone,
        truename: this.name
      }).then(res => {
        let { code, data, msg } = res;
        if (code === 200) {
          this.listData = data.list;
          this.totals = data.count;
          this.prizeCodes = data.prizeCodes;
          this.winner = data.winner;
          this.prize = data.hot.prize.goods.goods_name;
          this.titleTime = data.hot.title_time;
          this.title = data.hot.title;
          this.nums = data.nums;
        } else {
          this.$message.error(msg);
          this.listData = [];
        }
      });
    },
    changes(page) {
      this.pages = page;
      this.getList();
    }
  }
};
</script>
<style lang="scss" scoped>
.hm {
  width: 100%;
  display: flex;
  justify-content: space-around;
  font-size: 12px;
  .hmtit {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
  }
}
.tit {
  width: 100%;
  padding: 20px 0;
  font-weight: 700;
  color: #595961;
  text-align: left;
}
</style>
